<template>
  <div style="width:100%;height:100%"></div>
</template>

<script>
import { getPie } from "../../../../service/workbenchApi";

export default {
  data() {
    return {
      functionName: [],
      perSum: [],
      myChart4: null,
      pieData: []
    };
  },
  methods: {
    getData() {
      getPie().then(res => {
        if (res.code == 0) {
          res.data.forEach(element => {
            this.pieData.push({
              name: element.functionName + element.perSum + "人",
              value: element.perSum
            });
          });
          this.myChart4.setOption({
            series: {
              data: this.pieData
            }
          });
        }
      });
    },
    drawPie1() {
      this.$nextTick(_ => {
        // 基于准备好的dom，初始化echarts实例
        var myChart4 = this.$echarts.init(document.querySelector(".pie"));
        this.myChart4 = myChart4;
        myChart4.setOption({
          // 颜色不会设计~
          // color: [
          //   "#00B98D",
          //   "#29CC6A",
          //   "#88DB50",
          //   "#C5E02E",
          //   "#3F9DFF",
          //   "#FBC6C6",
          //   "#F6E1A7"
          // ],
          series: {
            name: "人员分析",
            type: "pie",
            radius: ["10%", "70%"],
            center: ["50%", "50%"],
            roseType: "radius",
            // 图形的文字标签
            label: {
              fontSize: 10
            },
            // 链接图形和文字的线条
            labelLine: {
              // length 链接图形的线条
              length: 2,
              // length2 链接文字的线条
              length2: 2
            },
            data: []
          }
        });
        window.addEventListener("resize", function() {
          myChart4.resize();
        });
      });
    }
  },
  mounted() {
    this.drawPie1();
    this.getData();
  }
};
</script>

<style lang="scss" scoped></style>
